<template>
  <section class="main">
    <a-card style="margin-top: 24px" :bordered="false" title="胰岛素记录">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div>
      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="date"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="ipagination"
          :loading="listDataLoading"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
          <template slot="morningInsulinDescribe" slot-scope="text, record">
            <a-tooltip :title="record | morningRemark">
              <template v-if="record.morningInsulinDescribe && record.morningInsulinRecord">
                <span>{{ '遵嘱注射' + record.morningInsulinDescribe + 'U' }}</span>
              </template>
              <template v-else>
                <span>{{
                  record.morningInsulinRecord &&
                    (record.morningInsulinRecord.injection == 2
                      ? '漏注射'
                      : record.morningInsulinRecord.injection == 3
                      ? '自停打'
                      : '')
                }}</span>
              </template>
              <template>
                <div
                  style="display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 353px;"
                  v-if="record.morningInsulinRecord && record.morningInsulinRecord.recordPhoto"
                >
                  <div
                    v-for="(photo, index) in record.morningInsulinRecord.recordPhoto.split(',')"
                    :key="index"
                    style="padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;"
                  >
                    <img
                      style="width: 80px; height: 80px;"
                      :src="photo"
                      :preview="record.morningInsulinRecord.recordPhoto.split(',')"
                    />
                  </div>
                </div>
                <div v-else></div>
              </template>
            </a-tooltip>
          </template>
          <template slot="noonInsulinDescribe" slot-scope="text, record">
            <a-tooltip :title="record | noonRemark">
              <template v-if="record.noonInsulinDescribe && record.noonInsulinRecord">
                <span>{{ '遵嘱注射' + record.noonInsulinDescribe + 'U' }}</span>
              </template>
              <template v-else>
                <span>{{
                  record.noonInsulinRecord &&
                    (record.noonInsulinRecord.injection == 2
                      ? '漏注射'
                      : record.noonInsulinRecord.injection == 3
                      ? '自停打'
                      : '')
                }}</span>
              </template>
              <template>
                <div
                  style="display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 353px;"
                  v-if="record.noonInsulinRecord && record.noonInsulinRecord.recordPhoto"
                >
                  <div
                    v-for="(photo, index) in record.noonInsulinRecord.recordPhoto.split(',')"
                    :key="index"
                    style="position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;"
                  >
                    <img
                      style="width: 80px; height: 80px;"
                      :src="photo"
                      :preview="record.noonInsulinRecord.recordPhoto.split(',')"
                    />
                  </div>
                </div>
                <div v-else></div>
              </template>
            </a-tooltip>
          </template>
          <template slot="nightInsulinDescribe" slot-scope="text, record">
            <a-tooltip :title="record | nightRemark">
              <template v-if="record.nightInsulinDescribe && record.nightInsulinRecord">
                <span>{{ '遵嘱注射' + record.nightInsulinDescribe + 'U' }}</span>
              </template>
              <template v-else>
                <span>{{
                  record.nightInsulinRecord &&
                    (record.nightInsulinRecord.injection == 2
                      ? '漏注射'
                      : record.nightInsulinRecord.injection == 3
                      ? '自停打'
                      : '')
                }}</span>
              </template>
              <template>
                <div
                  style="display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 353px;"
                  v-if="record.nightInsulinRecord && record.nightInsulinRecord.recordPhoto"
                >
                  <div
                    v-for="(photo, index) in record.nightInsulinRecord.recordPhoto.split(',')"
                    :key="index"
                    style="position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;"
                  >
                    <img
                      style="width: 80px; height: 80px;"
                      :src="photo"
                      :preview="record.nightInsulinRecord.recordPhoto.split(',')"
                    />
                  </div>
                </div>
                <div v-else></div>
              </template>
            </a-tooltip>
          </template>
          <template slot="beforeSleepInsulinDescribe" slot-scope="text, record">
            <a-tooltip :title="record | sleepRemark">
              <template v-if="record.beforeSleepInsulinDescribe && record.beforeSleepInsulinRecord">
                <span>{{ '遵嘱注射' + record.beforeSleepInsulinDescribe + 'U' }}</span>
              </template>
              <template v-else>
                <span>{{
                  record.beforeSleepInsulinRecord &&
                    (record.beforeSleepInsulinRecord.injection == 2
                      ? '漏注射'
                      : record.beforeSleepInsulinRecord.injection == 3
                      ? '自停打'
                      : '')
                }}</span>
              </template>
              <template>
                <div
                  style="display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 353px;"
                  v-if="record.beforeSleepInsulinRecord && record.beforeSleepInsulinRecord.recordPhoto"
                >
                  <div
                    v-for="(photo, index) in record.beforeSleepInsulinRecord.recordPhoto.split(',')"
                    :key="index"
                    style="position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;"
                  >
                    <img
                      style="width: 80px; height: 80px;"
                      :src="photo"
                      :preview="record.beforeSleepInsulinRecord.recordPhoto.split(',')"
                    />
                  </div>
                </div>
                <div v-else></div>
              </template>
            </a-tooltip>
          </template>
          <template slot="casInsulinDescribe" slot-scope="text, record">
            <a-tooltip :title="record | casRemark">
              <template v-if="record.casInsulinDescribe && record.casInsulinRecord">
                <span>{{ '遵嘱注射' + record.casInsulinDescribe + 'U' }}</span>
              </template>
              <template v-else>
                <span>{{
                  record.casInsulinRecord &&
                    (record.casInsulinRecord.injection == 2
                      ? '漏注射'
                      : record.casInsulinRecord.injection == 3
                      ? '自停打'
                      : '')
                }}</span>
              </template>
              <template>
                <div
                  style="display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 353px;"
                  v-if="record.casInsulinRecord && record.casInsulinRecord.recordPhoto"
                >
                  <div
                    v-for="(photo, index) in record.casInsulinRecord.recordPhoto.split(',')"
                    :key="index"
                    style="position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;"
                  >
                    <img
                      style="width: 80px; height: 80px;"
                      :src="photo"
                      :preview="record.casInsulinRecord.recordPhoto.split(',')"
                    />
                  </div>
                </div>
                <div v-else></div>
              </template>
            </a-tooltip>
          </template>
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>

      <insulin-modal ref="modalForm" @ok="modalFormOk"></insulin-modal>
    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import InsulinModal from './modules/InsulinModal'

const listColumns = [
  {
    title: '日期/监测项',
    align: 'center',
    dataIndex: 'date',
    width: 120
  },
  {
    title: '胰岛素（早）',
    align: 'center',
    dataIndex: 'morningInsulinDescribe',
    scopedSlots: { customRender: 'morningInsulinDescribe' }
  },
  {
    title: '胰岛素（午）',
    align: 'center',
    dataIndex: 'noonInsulinDescribe',
    scopedSlots: { customRender: 'noonInsulinDescribe' }
  },
  {
    title: '胰岛素（晚）',
    align: 'center',
    dataIndex: 'nightInsulinDescribe',
    scopedSlots: { customRender: 'nightInsulinDescribe' }
  },
  {
    title: '胰岛素（睡前）',
    align: 'center',
    dataIndex: 'beforeSleepInsulinDescribe',
    scopedSlots: { customRender: 'beforeSleepInsulinDescribe' }
  },
  {
    title: '胰岛素泵（CSII）',
    align: 'center',
    dataIndex: 'casInsulinDescribe',
    scopedSlots: { customRender: 'casInsulinDescribe' }
  }
]
export default {
  name: 'Insulin',
  mixins: [BloodProfileMixin],
  components: {
    InsulinModal
  },
  data() {
    return {
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId], type: 3, period: 0 },
      listColumns,
      url: {
        // 按日期分组获取患者胰岛素记录
        getList: '/101/08/1010802'
      }
    }
  },
  filters: {
    morningRemark(record) {
      if (!record.morningInsulinRecord) return ''
      return record.morningInsulinRecord.insulinRemark || ''
    },
    noonRemark(record) {
      if (!record.noonInsulinRecord) return ''
      return record.noonInsulinRecord.insulinRemark || ''
    },
    nightRemark(record) {
      if (!record.nightInsulinRecord) return ''
      return record.nightInsulinRecord.insulinRemark || ''
    },
    sleepRemark(record) {
      if (!record.beforeSleepInsulinRecord) return ''
      return record.beforeSleepInsulinRecord.insulinRemark || ''
    },
    casRemark(record) {
      if (!record.casInsulinRecord) return ''
      return record.casInsulinRecord.insulinRemark || ''
    }
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
.table-operator {
  margin-bottom: 10px;
}

.clName .ant-tree li span.ant-tree-switcher,
.ant-tree li span.ant-tree-iconEle {
  width: 10px !important;
}

.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #1890ff !important;
}
</style>

